<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css/M-CSS/M-style.css" rel="stylesheet">
    <link href="css/M-CSS/M-comm.css" rel="stylesheet">
    <style>
        .about_title h1{
            margin:1em 0;
            text-align: center;
            font-size:4em;
            letter-spacing: 2px;
        }
        .photo{
            float:left;
            width:40%;
        }
        .photo img{
            width:100%;
        }
        .skill{
            float:left;
            width:60%;
            padding-left:50px;
        }
        .skill h2{
            font-size:2.5em;

        }
        .skill ul{
            margin-top:30px;
        }
        .skill ul li{
            list-style-type: none;
            padding-left:20px;
            padding-top:5px;
            padding-bottom:5px;
            font-weight:600;
            color:#FFF;
            margin:20px 0;
        }
        #li1{
            background:#f05423;
            width:200px;
        }
        #li2{
            background: #bef09b;
            width:400px;
        }
        #li3{
            background: #88b7f0;
            width:300px;
        }
        #li4{
            background: #a454f0;
            width:250px;
        }
        #li5{
            background: #f0436f;
            width:200px;
        }
        .description{
            margin:30px 0;

        }
        .description h2{
            font-size:2.5em;
            padding-left:30px;
        }
        .description p{
            font-size:2.2em;
            margin-top:30px;
        }
        .contact_share{
            margin:30px 0;
        }
        .contact{
            padding-left:30px;
        }
        .contact h2{
            font-size:2.5em;
        }
        .contact ul{
            margin-top:30px;
        }
        .contact ul li{
            font-size: 2.2em;
        }
    </style>
</head>
<body>
<div class="about_title">
    <div class="contain">
        <h1>ABOUT</h1>
    </div>
</div>
<div class="photo_skill">
    <div class="contain">
        <div class="photo">
            <img src="images/mem.jpg"/>
        </div>
        <div class="skill">
            <h2>Skill</h2>
            <ul>
                <li id="li1">Web</li>
                <li id="li2">Java</li>
                <li id="li3">Photoshop</li>
                <li id="li4">Axure</li>
                <li id="li5">Visio</li>
            </ul>
        </div>
        <div style="clear:both;"></div>
        <div class="description">
            <h2>Who am I ?</h2>
            <p>&nbsp;&nbsp;一个集才华与逗比为一身的男生,我自己手写的 你可以稍微改下姓名学号 照片,附件传上来了也可以把图片查看原图另存为本地后缀改成.zip在里面</p>
        </div>
    </div>
</div>
<div class="contact_share">
    <div class="contain">
        <div class="contact">
            <h2>Contact Me</h2>
            <ul>
                <li>Tel:</li>
                <li>QQ:</li>
                <li>微信:</li>
            </ul>
        </div>
        <div class="share"></div>
    </div>

</div>
</body>
</html>